<template>
  <div class="list">
    <div class="batch">
      <div class="batch-l mr-8">
        <van-checkbox v-model="formData.checked" shape="square" @change="handleChange"></van-checkbox>
      </div>
      <div class="batch-r">
        <div class="batch-r-content mb-15">
          <div class="label mr-11">{{index+1}}、批次号:</div>
          <div class="content">{{formData.stockInventoryDetailEntity.barCode}}</div>
        </div>
        <div class="batch-r-content center mb-15 justify">
          <div class="batch-r-content center">
            <div class="label mr-8">批次品质:</div>
            <el-input size="mini"  @focus="chsoeMq" :disabled="true" style="width: 73px" v-model="formData.stockInventoryDetailEntity.materialQualityName" readonly />
          </div>
          <div class="batch-r-content center">
            <div class="label mr-8">实际数量:</div>
            <el-input size="mini" :disabled="!(status == '0' || status == '1')" v-model="formData.realNum" style="width: 73px"  readonly @focus="realNumDialog" />
          </div>
        </div>
        <div class="batch-r-content center mb-15">
          <div class="label mr-8">批次备注:</div>
          <div class="content" style="flex: 1">
            <el-input type="textarea" v-model="formData.remark" autosize placeholder="请输入内容">
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="list-content-bottom">
      <div class="imgBox">
        <!-- <img src="@/assets/images/allocation/print.png" v-if="formData.stockInventoryDetailEntity.materialFields.isBatchMag" @click="printDialog(formData)" />
        <img
          v-if="status === 0 || status ===1"
          @click="handleDelete(formData.stockMaterialDetailId)"
          src="@/assets/images/allocation/garbage1.png"
        /> -->
        <el-button type="text" v-if="formData.stockInventoryDetailEntity.materialFields.isBatchMag"
          @click="printDialog(formData)"
        >
          打印
        </el-button>
        <el-button style="color:#f56c6c" v-if="status === 0 || status ===1"
          type="text" @click="handleDelete(formData.stockMaterialDetailId)"
        >
          移除
        </el-button>
      </div>
    </div>

    <!--dialog -->
    <van-dialog v-model="show" title="实际数量" show-cancel-button confirm-button-color="#548AF1" @confirm="numHandleConfirm" @cancel="numHandleCancel">
      <van-form ref="realNumForm">
        <van-field name="realNum" v-model="realNum" type="number" label="实际数量" :rules="[{required:true, validator, message: '实际数量不能为空或0',trigger:'onChange' }]" />
      </van-form>
    </van-dialog>
    <van-popup v-model="showPicker" style="width: 100%" position="bottom">
      <van-picker
        title="批次品质"
        show-toolbar
        :columns="mqList"
        @confirm="onConfirm"
        @cancel="onCancel"
        value-key="label"
        style="width: 100%"
      />
    </van-popup>
  </div>
</template>
<script>
import { Checkbox, CheckboxGroup, Dialog } from "vant";

export default {
  data() {
    return {
      checked: false,
      showPicker:false,
      mqList: [
        { label: "合格", value: 1 },
        { label: "不合格", value: 0 },
      ],
      currentItem: {},
      show:false,
      realNum:""
    };
  },
  props:{
    formData:{
      type:Object,
      default:()=>{
        return{

        }
      }
    },
    status:{
      type:String|Number,
      default:""
    },
    index:{
      type:String|Number,
      default:""
    }
  },
  created(){
    this.realNum = JSON.parse(JSON.stringify(this.formData.realNum))
  },
  computed:{

  },
  components: {
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Dialog.Component.name]: Dialog.Component,
  },
  methods: {
    printDialog(item){
      this.currentItem = item
      this.$emit('printDialog',this.currentItem,1)
    }, 
    realNumDialog(){
      this.realNum = JSON.parse(JSON.stringify(this.formData.realNum)) 
      this.show = true
    },
     validator(val) {
      if(val>0){
        return true
      }else if(!val){
        return false
      }else if(val <= 0){
        return false
      }
    },
    updateMaterialDetails(data) {
      return new Promise(async (resolve, reject) => {
        const {
          data: { code },
        } = await updateMaterialDetails(data);
        if (code == 200) {
          Toast.success("提交成功");
          resolve();
        }
      });
    },
    numHandleConfirm(){
      this.$refs.realNumForm.validate('realNum').then((res)=>{
          this.formData.realNum = this.realNum
          this.show = false
          this.$emit('numChange',this.formData)
      }).catch((err)=>{
        this.show = true
      })
      
    },
    numHandleCancel(){
      this.show = false
    },
    handleChange(val){
      this.$emit('checkChange',)
    },

    handleDelete(id) {
      this.$emit('batchDelete',[id])
    },
    chsoeMq() {
      this.showPicker = true;
    },
    // 点击picker取消按钮
    onCancel() {
      this.showPicker = false;
    },
    // 点击picker确定按钮
    onConfirm(e) {
      this.formData.stockInventoryDetailEntity.materialQuality = e.value;
      this.formData.stockInventoryDetailEntity.materialQualityName = e.label;
      console.log(this.formData);
      this.showPicker = false;
    },
  },
};
</script>
<style scoped lang="scss">
.mb-15 {
  margin-bottom: 15px;
}
.mr-8 {
  margin-right: 8px;
}
.mr-11 {
  margin-right: 11px;
}
.list {
  width: 100%;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
  border-radius: 4px 4px 4px 4px;
  margin-bottom: 15px;
  .batch {
    display: flex;

    .batch-l {
    }
    .batch-r {
      flex: 1;
      .batch-r-content {
        display: flex;
        align-items: flex-end;

        &.center {
          align-items: center;
        }
        &.justify {
          justify-content: space-between;
        }
        .label {
          font-size: 15px;
          font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
          font-weight: normal;
          color: #666666;
        }
        .content {
          font-size: 15px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }
  .list-content-bottom {
    margin-top: 15px;
    text-align: right;
    .imgBox {
      img {
        width: 20px;
        height: 20px;
        margin-left: 15px;
      }
    }
  }
}
</style>
